<template>
  <div class="home">

    <div class="lbuo" v-if="lbData!=''">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(p , index) in lbData" :key="index" :data-name="p.name"
          :data-caricatureId="p.caricatureId"> <img :src="p.url" :alt="p.name"></van-swipe-item>
      </van-swipe>
    </div>
    <div class="main-box" v-if="mainData!=''">
      <mainBox v-for="p in mainData" :key="p.id" :mainData="p" :caricatureId="caricatureId"></mainBox>
    </div>
    <div v-if="mainData==''" class="deng">
      <p>// 载入中... _(:3 」∠)_</p>
    </div>
  </div>
</template>

<script>
import mainBox from '../components/main-box'
export default {
  name: 'HomeView',
  components: { mainBox },
  props: ['caricatureId'],
  data() {
    return {
      lbData: '',
      mainData: '',
      img: '../assets/public/wt.png',
      url1: `http://127.0.0.1/main/lbtu`,
      url2: `http://127.0.0.1/main/mainimg`,
    }
  },
  methods: {
    getLBData() {
      fetch(this.url1)
        .then(response => response.json())
        .then(data => {
          this.lbData = data.data
        });
    },
    getMainData() {
      fetch(this.url2)
        .then(response => response.json())
        .then(data => {
          this.mainData = data.data
        });
    }
  },
  mounted() {
    this.getLBData()
    this.getMainData()
  }

}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

@width: 95.2667vw;
@height: 57.3333vw;

ul {
  list-style: none;
}

a {
  text-decoration: none !important;
  color: #919aa7;
}

.deng {
  position: relative;
  top: 44.2667vw;

  p {
    height: 5.3333vw;
    line-height: 5.3333vw;
    font-size: 3.2vw;
    text-align: center;
    margin: 0 auto;
    color: #c0c0c0;
  }
}

.lbuo {
  width: @width;
  height: @height;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 4vw;


  .van-swipe {
    color: #fff;
    text-align: center;
    height: 100%;
    width: 100%;

    .van-swipe__track {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        z-index: -9;
      }
    }



    .van-swipe__indicators {
      position: absolute;
      bottom: 0vw;
      left: 50%;
      transform: translateX(50%);
      z-index: 999999;
    }
  }
}
</style>
